<template>
  <div class="title1">
    <el-row>
      <el-col :span="24">
        <div class="title2">
          <div class="text">修改密码</div>
        </div>
        <div style="display: flex;justify-content: space-between;height: 102px;">
          <div>
            <div class="title3" style="margin-left: 44px;">
              <span class="text" style="font-weight: 600;">账户密码</span>
            </div>
            <div class="title3" style="margin-left: 44px;margin-top: 19px;">
              <span class="text">密码要求至少包含字母，符号或数字中的两项且长度超8位，建议您经常修改密码，以保证账号更加安全</span>
            </div>
          </div>
          <div class="title4">
            <button class="bt" @click="dialogVisible = true">修改</button>
          </div>
        </div>
        <el-dialog
          title="修改密码"
          :visible.sync="dialogVisible"
          width="76%"
          :before-close="handleClose"
          style="font-weight: 600;"
        >
          <div title5>
            <img class="img" src="@/static/image/sfen.png" alt="">
            <img v-if="id==='1'" class="img" style="margin-left: -12px;" src="@/static/image/weishezhi.png" alt="">
            <img v-if="id==='2'" class="img" style="margin-left: -12px;" src="@/static/image/shezhi.png" alt="">
            <img v-if="ids==='1'" class="img" style="margin-left: -12px;" src="@/static/image/weiwanc.png" alt="">
            <img v-if="ids==='2'" class="img" style="margin-left: -12px;" src="@/static/image/weiwanc1.png" alt="">
          </div>
          <!-- 身份验证 -->
          <div v-if="id==='1'">
            <el-form ref="ruleForm" style="margin-left: 325px;" :model="ruleForm" :rules="rules" label-width="70px" class="demo-ruleForm">
              <el-form-item class="title6" label="手机号" prop="phone">
                <el-input v-model="ruleForm.phone" maxlength="11" style="width: 801px;" class="input" placeholder="请输入" />
              </el-form-item>
              <el-form-item class="title6" label="验证码" prop="code" style="margin-top: 30px;">
                <el-input v-model="ruleForm.code" maxlength="6" class="input" style="width: 659px;" type="text" placeholder="请输入" />
                <el-button
                  class="bt"
                  style="width: 122px;
                  height: 42px;
                  background: #2087D0;
                  border-radius: 21px;
                  margin-left: 11px;
                  font-size: 18px;
                  font-family: Source Han Sans CN;
                  font-weight: 400;
                  color: #FFFFFF;"
                >获取验证码</el-button>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button class="bt" type="primary" @click="submitForm('ruleForm')">下一步</el-button>
            </span>
          </div>
          <!-- 重新设置 -->
          <div v-if="id1==='1'">
            <el-form ref="ruleForm" style="margin-left: 325px;" :model="ruleForm" :rules="rules" label-width="70px" class="demo-ruleForm">
              <el-form-item class="title6" label="新密码" prop="phone">
                <el-input v-model="ruleForm.password" maxlength="11" style="width: 801px;" class="input" placeholder="请输入" />
              </el-form-item>
              <el-form-item class="title6" label="确认密码" prop="code" label-width="80px" style="margin-top: 30px;margin-left: -10px;">
                <el-input v-model="ruleForm.password1" class="input" style="width: 801px;" type="text" placeholder="请输入" />
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button class="bt" type="primary" @click="submitForm1('ruleForm')">提交新密码</el-button>
            </span>
          </div>
          <!-- 操作完成 -->
          <div v-if="ids==='2'" class="title7">
            <img class="img" src="@/static/image/wanc.png" alt="">
            <div class="text">密码修改成功，需重新登录</div>
            <button class="bt" @click="bt">去登录</button>
          </div>
        </el-dialog>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {

  components: {},
  data() {
    return {
      dialogVisible: false,
      id: '1',
      id1: '',
      ids: '1',
      ruleForm: {
        name: '',
        password: '',
        password1: '',
        phone: '',
        code: ''
      },
      rules: {
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { min: 1, max: 12, message: '手机号不合法', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { min: 1, max: 6, message: '验证码错误', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '长度至少6位', trigger: 'blur' }
        ],
        password1: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '长度至少6位', trigger: 'blur' }
        ]
      }
    }
  },

  computed: {},

  created() {},

  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.id = '2'
          this.id1 = '1'
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    submitForm1(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.ruleForm.password !== this.ruleForm.password1) {
            return alert('密码不一致')
          } else {
            this.id1 = '2'
            this.ids = '2'
            this.id = '2'
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    bt() {
      this.dialogVisible = false
    }
  }
}

</script>
<style  scoped lang="scss">
.title1{
  margin-left: 48px;
}
.title2{
  display: flex;
  justify-content: space-between;
height: 57px;
background: #F5F5F5;
border-radius: 4px 4px 0px 0px;
line-height: 57px;
.text{
margin-left: 25px;
font-size: 18px;
font-family: Source Han Sans CN;
font-weight: 800;
color: #333333;
}
.text1{
  border: 1px #F5F5F5 solid;
  font-size: 18px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #2087D0;
margin-right: 30px;
background-color: #F5F5F5;
}
}
.title3{
  margin: 30px 0 0 73px;
  display: flex;
  .text{
    font-size: 18px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #666666;
  }

  .text1{
    font-size: 18px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #333333;
  }
}
.title4{
  line-height: 102px;
  .bt{
    width: 96px;
height: 42px;
background: #FFFFFF;
border: 1px solid #2087D0;
border-radius: 21px;
margin-right: 30px;
font-size: 18px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #2087D0;
  }
}
.title5{
  .img{
    width: 498px;
    height: 42px;
  }
}
.title6{
  margin-top: 76px;
  .text{
    display: flex;
    margin-left: 325px;
    .input{
      width: 801px;
height: 42px;
background: #FFFFFF;
border: 1px solid #EBECEE;
border-radius: 4px;
margin-left: 12px;
outline: none;
    }
    .text1{
      margin-top: 13px;
      margin-left: 3px;
    }
    .spa{
      color: red;
      margin-top: 13px;
    }
    .bt{
      width: 122px;
height: 42px;
background: #2087D0;
border-radius: 21px;
margin-left: 11px;
font-size: 18px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FFFFFF;
border: 1px #2087D0 solid;

    }
  }
}
.dialog-footer{
  .bt{

    width: 484px;
height: 48px;
background: #2087D0;
border-radius: 24px;
margin-right: 522px;
  font-size: 20px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FFFFFF;
margin-bottom: 100px;
margin-left: 522px;
margin-top: 44px;
  }
}
.title7{
  text-align: center;
  margin-top: 72px;
  .text{
    font-size: 16px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #999999;
margin-top: 16px;
  }
  .bt{
    margin-top: 72px;
    width: 484px;
height: 48px;
background: #2087D0;
border-radius: 24px;
border: 1px #2087D0 solid;
font-size: 20px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #FFFFFF;
margin-bottom: 100px;
  }
}
</style>
